<template>
  <el-col :span="8">
    <el-card shadow="hover" class="topCard">
      <div class="header">
        <slot name="header"><span>全球累计疫情</span></slot>
        <el-tag type="danger" effect="dark" class="btn">日</el-tag>
      </div>
      <div class="content">
        <el-row :gutter="20">
          <StatisticItem :data1="statisticData.confirmedCount" :data2="statisticData.confirmedIncr">
            <p class="range">累计确诊</p>
          </StatisticItem>
          <StatisticItem :data1="statisticData.currentConfirmedCount" :data2="statisticData.currentConfirmedIncr">
            <p class="range">现存确诊</p>
          </StatisticItem>
          <!-- <StatisticItem :data1="statisticData.confirmedCount" :data2="statisticData.confirmedIncr">
            <p class="range">累计确诊</p>
          </StatisticItem> -->
        </el-row>
      </div>
    </el-card>
  </el-col>
</template>

<script>
import StatisticItem from '../components/StatisticItem.vue'
export default {
  data () {
    return {}
  },
  props: {
    statisticData: {
      type: Object,
    }
  },
  components: {
    StatisticItem
  },
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.topCard {
  height: 196px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 20px;
}

h4 {
  display: inline-block;
}

.topCard .btn,
.card .btn {
  float: right;
}

.range {
  font-size: 14px;
  color: #8c939d;
  vertical-align: middle;
  text-align: center;
}

.topCard .content {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 10px;
  vertical-align: middle;
  text-align: center;
}
</style>